@charset "utf-8";
/*
	公用总样式表
		1.全局样式规定。
*/
@import 'util/_scss_function';
@import 'util/_header_nav';
@import 'util/_footer_bottom';
html,body{
	@include min-body-width;
}
html,body{
	@include m;
	@include p;
	-webkit-backface-visibility: hidden;
    font-family: "Helvetica Neue","Microsoft YaHei",Helvetica,Tahoma,sans-serif;
}
ul, ol, li,p{
	@include m;
	@include p;
	list-style: none;
}
input,textarea{
	outline: none;
}
a{
	text-decoration: none;
}
img{
	border: 0;
}
table{
    border-collapse: collapse;
    border-spacing: 0;
}
.family{
	@include family();
}
// 模糊滤镜
.filter-transition{
	@include transition(.5s);
}
.filter{
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
	filter: blur(5px);
}
.content {
	@include content;
}

// 按钮
.btn{
	@include btn;
}

.btn-white{
	@include btn;
	@include transition(.25s);
	background-color: #fff;
	&.active,
	&:hover{
		background-color: #de1e30;
		color: #fff;
	}
    &.active{
        &:hover{
            background-color: #cd1b2b;
        }
    }
    &.visible{
        background-color: #ccc!important;
        cursor: auto;
    }
}
// 粉色按钮
.btn-pink{
    @include btn;
    @include transition(.25s);
    background-color: #f5677d;
    color: #fff;
    &.active,
    &:hover{
        background-color: #de1e30;
        color: #fff;
    }
    &.active{
        &:hover{
            background-color: #cd1b2b;
        }
    }
    &.visible{
        background-color: #ccc!important;
        cursor: auto;
    }
}

// 带边框按钮
.btn-border{
	@include btn;
	@include transition(.25s);
	background-color: #fff;
	line-height: 28px;
	border: 1px solid #ddd;
	&.active,
	&:hover{
		background-color: #de1e30;
		border-color: #de1e30;
		color: #fff;
	}
}

/* 背景颜色*/
// 白色
.bgcolor-white{
	background-color: #fff;
}
// 红色
.bgcolor-red{
	background-color: #de1e30;
}
.bgcolor-red2{
    background-color: #ffe6e6;
}
.bgcolor-red3{
    background-color: #ff807e;
}

.bgcolor-yellow4{
    background-color: #f2bf51;
}
.bgcolor-blue1{
    background-color: #6dbcee;
}

/* 字体大小*/
.f-z-14{
    font-size: 14px;
}
/* 字体颜色*/
// 白色
.color-white{
    color: #fff;
}
// 红色
.color-red{
	color: #de1e30;
}
.color-red3{
    color: #ff807e;
}
// 灰色
.color-gray{
	color: #666;
}
.color-gray2{
    color: #999;
}
.color-bbb{
    color: #bbb;
}
.color-777{
    color: #777;
}
// 绿色
.color-green{
	color: #86ca01;
}
.color-green2{
    color: #31d193;
}
.color-green3{
    color: #DDDCE0;
}
// 黄色
.color-yellow{
    color: #ffb980;
}
.color-yellow2{
    color: #ff976e;
}
.color-yellow3{
    color: #ff9000;
}
.color-yellow4{
    color: #f2bf51;
}
// 粉色
.color-powder{
    color: #ffb2be;
}
// 黑色
.color-black{
    color: #333;
}
// 蓝色
.color-blue{
    color: #6cd0ff;
}
.color-blue1{
    color: #6dbcee;
}
.color-blue2{
    color: #0072bb;
}
/*布局*/
.col-2{
	width: 50%;
}
.col-3{
	width: 33.2%;
}
.col-4{
	width: 25%;
}
.col-5{
	width: 20%;
}
.col-6{
	width: 16.668%;
}
.col-7{
	width: 14.2%;
}
.col-8{
    width: 12.5%;
}
.col-9{
    width: 11.1%;
}
.col-10{
    width: 10%;
}
/* 下拉框*/

/* 浮动 */
.float-left{@include float-left;}
.float-right{@include float-right;}
.display-i-b{
    display: inline-block;
}
.hide{
    display: none!important;
}
.visibility{
    visibility:hidden;
}
.position-r{
    position: relative;
}
.position-a{
    position: absolute;
}
.position-i{
    position: inherit;
}
/* 清除浮动 */
.clearfix{
    &:after,
    &:before{
        content: '';
        display: table;
        clear: both;
    }
}
/* 外边距 */
// top
.m-t-10{
	margin-top: 10px;
}
.m-t-15{
	margin-top: 15px;
}
.m-t-20{
	margin-top: 20px;
}
.m-t-30{
	margin-top: 30px;
}
.m-t-40{
	margin-top: 40px;
}
.m-t-50{
	margin-top: 50px;
}
.m-t-61{
	margin-top: 61px;
}
// bottom
.m-b-5{
    margin-bottom: 5px;
}
.m-b-10{
	margin-bottom: 10px;
}
.m-b-15{
	margin-bottom: 15px;
}
.m-b-20{
	margin-bottom: 20px;
}
.m-b-30{
	margin-bottom: 30px;
}
.m-b-40{
	margin-bottom: 40px;
}
.m-b-50{
	margin-bottom: 50px;
}

// left
.m-l-5{
    margin-left: 5px;
}
.m-l-10{
	margin-left: 10px;
}
.m-l-20{
	margin-left: 20px;
}
.m-l-30{
	margin-left: 30px;
}
.m-l-40{
	margin-left: 40px;
}
.m-l-50{
	margin-left: 50px;
}

.m-r-5{
    margin-right: 5px;
}
.m-r-10{
	margin-right: 10px;
}
.m-r-20{
	margin-right: 20px;
}
.m-r-30{
	margin-right: 30px;
}
.m-r-40{
	margin-right: 40px;
}
.m-r-50{
	margin-right: 50px;
}
/* 内边距 */
// left
.p-l-1{
    padding-left: 1px;
}
.p-l-3{
    padding-left: 3px;
}
.p-l-5{
    padding-left: 5px;
}
.p-l-10{
	padding-left: 10px;
}
.p-l-20{
	padding-left: 20px;
}
// right
.p-l-3{
    padding-right: 3px;
}
.p-l-5{
    padding-right: 5px;
}
// bottom
.p-b-10{
	padding-bottom: 10px;
}
.p-b-20{
	padding-bottom: 20px;
}
.p-b-50{
    padding-bottom: 50px;
}



.right-45{
	right:45px;
}
/* 内容流 */
.text-a-c{
	text-align: center;
}
.text-a-l{
	text-align: left;
}
.text-a-r{
	text-align: right;
}
/* 鼠标样式 */
.cursor-p{
	cursor: pointer;
}
/* 宽度 */
.w-16{
    width: 16px;
}
.w-30{
	width: 30px;
}
.w-35{
	width: 35px;
}
.w-40{
	width: 40px;
}
.w-41{
    width: 41px;
}
.w-45{
    width: 45px;
}
.w-47{
    width: 47px;
}
.w-48{
    width: 48px;
}
.w-50{
	width: 50px;
}
.w-51{
	width: 51px;
}
.w-54{
    width: 54px;
}
.w-55{
    width: 55px;
}
.w-57{
    width: 57px;
}
.w-58{
	width: 58px;
}
.w-59{
	width: 59px;
}
.w-60{
	width: 60px;
}
.w-61{
    width: 61px;
}
.w-62{
    width: 62px;
}
.w-63{
	width: 63px;
}
.w-64{
	width: 64px;
}
.w-65{
	width: 65px;
}
.w-66{
    width: 66px;
}
.w-67{
    width: 67px;
}
.w-68{
    width: 68px;
}
.w-69{
    width: 69px;
}
.w-70{
    width: 70px;
}
.w-71{
    width: 71px;
}
.w-72{
    width: 72px;
}
.w-73{
    width: 73px;
}
.w-74{
    width: 74px;
}
.w-75{
    width: 75px;
}
.w-76{
    width: 76px;
}
.w-77{
    width: 77px;
}
.w-78{
	width: 78px;
}
.w-79{
    width: 78px;
}
.w-80{
	width: 80px;
}
.w-81{
	width: 81px;
}
.w-83{
	width: 83px;
}
.w-84{
    width: 84px;
}
.w-85{
	width: 85px;
}
.w-89{
    width: 89px;
}
.w-90{
    width: 90px;
}
.w-91{
    width: 91px;
}
.w-94{
    width: 94px;
}
.w-95{
	width: 95px;
}
.w-99{
	width: 99px;
}
.w-100{
    width: 100px;
}
.w-101{
    width: 101px;
}
.w-105{
    width: 105px;
}
.w-106{
    width: 106px;
}
.w-110{
	width: 110px;
}
.w-114{
	width: 114px;
}
.w-115{
	width: 115px;
}
.w-119{
	width: 119px;
}
.w-120{
    width: 120px;
}
.w-121{
    width: 121px;
}
.w-125{
    width: 125px;
}
.w-129{
	width: 129px;
}
.w-130{
    width: 130px;
}
.w-133{
    width: 133px;
}
.w-137{
    width: 137px;
}
.w-138{
    width: 138px;
}
.w-139{
    width: 139px;
}
.w-140{
	width: 140px;
}
.w-141{
    width: 141px;
}
.w-142{
    width: 142px;
}
.w-145{
    width: 145px;
}
.w-150{
	width: 150px;
}
.w-159{
	width: 159px;
}
.w-160{
	width: 160px;
}
.w-164{
	width: 164px;
}
.w-165{
    width: 165px;
}
.w-166{
    width: 166px;
}
.w-167{
    width: 167px;
}
.w-168{
    width: 168px;
}
.w-169{
	width: 169px;
}
.w-170{
    width: 170px;
}
.w-171{
    width: 171px;
}
.w-172{
    width: 172px;
}
.w-176{
    width: 176px;
}
.w-177{
    width: 177px;
}
.w-179{
	width: 179px;
}
.w-180{
    width: 180px;
}
.w-182{
    width: 182px;
}
.w-184{
    width: 184px;
}
.w-190{
    width: 190px;
}
.w-191{
    width: 191px;
}
.w-192{
    width: 192px;
}
.w-195{
	width: 195px;
}
.w-196{
    width: 196px;
}
.w-197{
    width: 197px;
}
.w-199{
    width: 199px;
}
.w-200{
    width: 200px;
}
.w-205{
    width: 205px;
}
.w-206{
    width: 206px;
}
.w-207{
    width: 207px;
}
.w-211{
    width: 211px;
}
.w-212{
    width: 212px;
}
.w-214{
    width: 214px;
}
.w-215{
	width: 215px;
}
.w-219{
    width: 219px;
}
.w-220{
	width: 220px;
}
.w-229{
	width: 229px;
}
.w-230{
    width: 230px;
}
.w-252{
    width: 252px;
}
.w-259{
    width: 259px;
}
.w-260{
    width: 260px;
}
.w-270{
    width:270px;
}
.w-276{
    width:276px;
}
.w-290{
	width: 290px;
}
.w-300{
     width: 300px;
 }
.w-317{
    width: 317px;
}
.w-318{
    width: 318px;
}
.w-330{
	width: 330px;
}
.w-350{
	width: 350px;
}
.w-360{
	width: 360px;
}
.w-364{
	width: 364px;
}
.w-365{
	width: 365px;
}
.w-374{
    width: 374px;
}
.w-375{
    width: 375px;
}
.w-380{
	width: 380px;
}
.w-513{
	width: 513px;
}
.w-523{
	width: 523px;
}
.w-525{
    width: 525px;
}
.w-535{
    width: 535px;
}
.w-1055{
	width: 1055px;
}
.w-1058{
	width: 1058px;
}


.w-bar-75{
    width: 75%;
}
.w-bar-80{
    width: 80%;
}
.w-bar-100{
	width: 100%;
}


/* 高 */
.h-16{
    height:16px;
}
/* 行 */
.row{
	width: 100%;
	float: left;
}
/*背景色*/
.bck-color-fff{
    background-color:#fff;
}
.bck-color-fafafa{
    background-color:#fafafa;
}
.bck-color-f0f1f2{
    background-color:#f0f1f2;
}
.bck-color-f5f5f5{
    background-color: #f5f5f5;
}
.bck-color-f7f7f8{
    background-color: #f7f7f8;
}
.bck-color-f25451{
    background-color: #f25451;
}
.bck-color-ddd{
    background-color: #ddd;
}
.bck-color-56a4d5{
    background-color: #56a4d5;
}
// 一级下拉框
.select-border{
	@include btn;
	@include transition(.1s);
	background-color: #fff;
	line-height: 28px;
	border: 1px solid #ddd;
	position: relative;
	& .icon-arrow{
		position: relative;
		font-size: 12px;
		float: right;
		margin-left: 2px;
		color: #bbb;
		top: 1px;
        width: 12px;
	}
	& .border-triangle{
	    position: absolute;
	    right: 10px;
	    bottom: -10px;
		width: 12px;
		height: 7px;
		background: url(../../img/base/layout-grid-triangle.png) no-repeat 0 -50px;
		display: none;
	}
	&:hover{
		background-color: #de1e30;
		border-color: #de1e30;
		color: #fff;
		& .icon-arrow{
			color: #fff;
		}

		& .border-triangle{
			display: block;
		}
		& .down{
			display: block;
		}
	}
	& .down{
		display: none;
		position: absolute;
		left: 0;
		top:100%;
		min-width: 100%;
		color: #666;
		padding-top: 10px;
		& > ul{
			float: left;
			min-width: 100%;
			box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
			background-color: #fff;
			border-radius: 5px;
			padding: 10px 0;
			& > li{
				@include transition(.1s);
				display: block;
				margin: 2px 10px;
				cursor: pointer;
				border-radius: 3px;
				text-align: center;
				line-height: 26px;
				white-space: nowrap;
				padding: 0 5px;
				&.active,
				&:hover{
					background-color: #de1e30;
					color: #fff;
				}
			}
		}
	}
}

// 一级下拉框,无样式
.select-type-one{
    @include transition(.1s);
    position: relative;
    display: inline-block;
    cursor: pointer;
    & .icon-arrow{
        position: relative;
        font-size: 12px;
        float: right;
        margin-left: 2px;
        color: #bbb;
        top: 1px;
        width: 12px;
    }
    & .border-triangle{
        position: absolute;
        right: 10px;
        bottom: -10px;
        width: 13px;
        height:7px;
        background: url(../../img/base/sprites-login-succ.png) no-repeat 0 -60px;
        display: none;
        z-index: 1;
    }
    &:hover{
        & .icon-arrow{}
        & .border-triangle{
            display: block;
        }
        & .down{
            display: block;
        }
    }
    & .down{
        display: none;
        position: absolute;
        left: 0;
        top:100%;
        min-width: 100%;
        color: #666;
        padding-top: 10px;
        & > ul{
            float: left;
            min-width: 100%;
            box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.23);
            background-color: #fff;
            border-radius: 5px;
            padding: 10px 0;
            & > li{
                @include transition(.1s);
                display: block;
                margin: 2px 10px;
                cursor: pointer;
                border-radius: 3px;
                text-align: center;
                line-height: 26px;
                white-space: nowrap;
                padding: 0 5px;
                &.active,
                &:hover{
                    background-color: #de1e30;
                    color: #fff;
                }
            }
        }
    }
}


// 带内容区下拉框
.select-panel{
	@include transition(.1s);
	height:65px;

	border-left: 1px solid #ddd;
	position: relative;
	cursor: pointer;
	color: #666;
	& .tip{
		line-height:65px;
		display: block;
		& .ico-left{
            width: 16px;
            height:16px;
            display: inline-block;
    		margin: 0 0 0 15px;
		}
		& .icon-arrow{
			position: relative;
			font-size: 12px;
			float: right;
			margin-left: 2px;
			top: 1px;
			margin-right: 10px;
		}
	}
	&:hover{
		color: #de1e30;
		& .down{
			display: block;
		}
	}
	& .down{
		display: none;
		position: absolute;
		left: 0;
		top:100%;
		min-width: 100%;
		color: #666;
		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
		background-color: #fff;
		& .check{
			cursor: pointer;
			& .choicen{
				position: relative;
				font-size: 17px;
				&:before { content: "\e616"; }
			}
			&:hover{
				color: #de1e30;
			}
			&.active{
				& .choicen{
					color: #de1e30;
					&:before { content: "\e617"; }
				}
			}
		}
		& .list-item{
			float: left;
			min-width: 100%;
			padding: 10px 0;
			& > li{
				@include transition(.1s);
				display: block;
				cursor: pointer;
				text-align: center;
				line-height: 30px;
				color: #666;
				&:hover{
					color: #de1e30;
				}
			}
		}
		& .list-content{
			float: left;
			min-width: 390px;
		    max-height: 300px;
		    overflow-x: hidden;
		    overflow-y: auto;
			& > li{
				@include transition(.1s);
				float: left;
				width: 100%;
				cursor: pointer;
				text-align: center;
				line-height: 30px;
				color: #666;
				font-size: 14px;
				& .check{
					float: left;
    				margin-bottom: 5px;
    				margin-right: 10px;
    				& .color-gray{
    					color: #bbb;
    				}
    				& .choicen{
					    position: relative;
					    top: 2px;
					    margin-right: 5px;
						font-size: 17px;
    				}
				}
				& .serial{
				    float: left;
				    width: 30px;
				    text-align: center;
				    font-size: 16px;
    				line-height: 34px;
				}
				& .list{
				    width: 340px;
				    float: left;
				    border-bottom: 1px dashed #ddd;
				    margin-bottom: 10px;
				}
				&:last-child{
					& .list{
						border-bottom: none;
						margin: 0;
					}
				}
			}
		}
		& .btn-list{
			float: left;
			width: 100%;
			line-height: 40px;
			background-color: #e7e7e8;
			& .button{
				@include transition(.3s);
				color: #666;
				float: left;
				cursor: pointer;
				text-align: center;
				&:hover{
					color: #de1e30;
				}
			}
		}
	}
}

// 鼠标移上提示框
.alt{
	position:relative;
	& .alt-top,
	& .alt-bottom,
	& .alt-left,
	& .alt-right{
        @include transition-fn(opacity .5s ease);
		position: absolute;
		background-color: #000;
		background-color: rgba(0,0,0,.8);
		white-space: nowrap;
		color: #fff;
		line-height: 25px;
		font-size: 12px;
		border-radius: 3px;
		display: inline-block;
        width: 0;
        padding: 0;
        overflow: hidden;
        height: 0;
        opacity:0;
		&>i{
			position: absolute;
			border-style: solid;
			border-color: transparent;
			border-width: 5px;
		}
	}

	& .alt-left,
	& .alt-right{
		top:50%;
		margin-top: -12px;
	}
	& .alt-top,
	& .alt-bottom{
        @include transform(translateX(-50%));
		left: 50%;
	}

	& .alt-left{
		right: 100%;
		margin-right: 5px;
		&>i{
		    border-left-color: #000;
		    border-left-color: rgba(0,0,0,.8);
		    right: -10px;
		    top: 50%;
		    margin-top: -5px;
		}
	}
	& .alt-right{
		left: 100%;
		margin-left: 4px;
		&>i{
		    border-right-color: #000;
		    border-right-color: rgba(0,0,0,.8);
		    left: -10px;
		    top: 50%;
		    margin-top: -5px;
		}
	}
	& .alt-top{
		top: -33px;
		&>i{
			border-top-color: #000;
			border-top-color: rgba(0, 0, 0, 0.8);
			left: 50%;
			bottom: -10px;
			margin-left: -5px;
		}
	}
	& .alt-bottom{
	    left: 50%;
	    top: 100%;
	    margin-top: 5px;
		&>i{
			border-bottom-color: #000;
			border-bottom-color: rgba(0, 0, 0, 0.8);
			left: 50%;
			top: -10px;
			margin-left: -5px;
		}
	}
	&:hover{
		& .alt-top,
		& .alt-bottom,
		& .alt-left,
		& .alt-right{
            overflow: inherit;
            width: auto;
            padding: 0 5px;
            height: auto;
            opacity:1;
		}
	}
}

// 边框
.bd-none{
    border-width:0!important;
}
.bd-left{
    border-left: 1px solid #eee;
}
.bd-left-e5{
    border-left: 1px solid #e5e5e5;
}

.bd-bottom{
    border-bottom: 1px solid #eee;
}
// 重定义nanoscroller
.nano{
	& .nano-pane{
		width: 5px;
		background-color:transparent;
		& .nano-slider{
			margin: 0;
			background-color:#e2e2e3;
		}
	}
}

// 指数上升or下降
.exponent{
    position: relative;
    & .iconfont{
        position: absolute;
        top: -1px;
        right: -15px;
    }
    & .icon{
        position: absolute;
        background-repeat: no-repeat;
        right: -12px;
        width: 9px;
        height: 8px;
	    top: 50%;
	    margin-top: -4px;
        &.up{
        	background-image: url(/img/base/arrow_index_up.gif);
        }
        &.down{
        	background-image: url(/img/base/arrow_index_down.gif);
        }
    }
}

.alt-yet-open{
	top:-25px!important;
    //margin-left: -29px;
}
.data-null{
    font-size: 18px;
    text-align: center;
    color: #bababa;
    margin: 90px 0 95px;
}

.gt_help_button,
.gt_logo_button{
    display: none!important;
}
.nano{
    & .nano-pane {
        width: 5px!important;
        background-color: transparent!important;
        & .nano-slider {
            margin: 0!important;
            background-color: #e2e2e3!important;
        }
    }
}

.o-hidden{
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



.live-track{
    font-size: 12px;
    color: #f5677d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    & > i{
        background: url(/img/base/lyout-grid-ball.gif) no-repeat;
        width: 14px;
        height: 20px;
        display: inline-block;
        position: relative;
        top: 4px;
        margin-right: 4px;
    }
}

@keyframes live-static{
    0% {
        background-position: 0 4px
    }

    75% {
        background-position: 0 0
    }
    100% {
        background-position: 0 4px
    }
}
@-webkit-keyframes live-static{
    0% {
        background-position: 0 4px
    }

    75% {
        background-position: 0 0
    }
    100% {
        background-position: 0 4px
    }
}
@-moz-keyframes live-static{
    0% {
        background-position: 0 4px
    }

    75% {
        background-position: 0 0
    }
    100% {
        background-position: 0 4px
    }
}
@keyframes live-static-after{
    0% {
        width: 11px;
        left: 2px;
    }
    75% {
        width: 0px;
        left: 8px;
    }
    100% {
        width: 11px;
        left: 2px;
    }
}
.live-static {
    @include animation(live-static,.7s,0,infinite,cubic-bezier(0.34, 0.03, 0.69, 1.06));
    background: url("/img/base/lyout-grid-ball.png") no-repeat 0px 1px;
    color: #f5677d;
    font-size: 12px;
    padding: 2px 0 2px 16px;
    height: 16px;
    &:after{
        @include animation(live-static-after,.7s,0,infinite,cubic-bezier(0.34, 0.03, 0.69, 1.06));
        content: "";
        position: absolute;
        background-color: rgba(0,0,0,.25);
        width: 11px;
        height: 1px;
        left: 3px;
        top: 18px;
        border-radius: 5px;
        -webkit-filter: blur(1px);
        -moz-filter: blur(1px);
        -o-filter: blur(1px);
        -ms-filter: blur(1px);
        filter: blur(1px);
    }
}

.nav-link{
    @include transition(.2s);
    @include font-size(14px);
    transition-delay:0s;
    color:#333;
    border-bottom: 2px solid transparent;
    position: relative;
    cursor: pointer;
    &:after,
    &:before{
        @include transition(.2s);
        content: '';
        position: absolute;
        bottom: -2px;
        width: 0%;
        height:2px;
        background-color: #de1e30;
    }
    &:before{
        right:50%;
    }
    &:after{
        left:50%;
    }
    &.active{
        @include nav-link();
    }


}
.error-msg {
    font-size: 12px;
    white-space: nowrap;
    color: #de1e30;
    & .iconfont {
        position: relative;
        top: 1px;
        margin-right: 10px;
        float: left;
        @include animation(error-icon, .3s, 0, 1, cubic-bezier(0.1, 1.07, 1, 1));
    }
}

// 右侧浮动工具箱
.tool-tips-fixed{
    position: fixed;
    bottom: 100px;
    left:50%;
    margin-left: 580px;
    width:45px;
    opacity: 0;
    & .link{
        @include transition(.3s);
        width:45px;
        height:45px;
        background-color: #b2b2b2;
        float: left;
        margin-bottom: 5px;
        line-height:45px;
        text-align: center;
        color: #fff;
        font-size:12px;
        font-family: arial;
        cursor: pointer;
        position: relative;
        & .over{
            width:100%;
            height:100%;
            float: left;
            overflow: hidden;
            position: relative;

            & .ico,
            & .tips{
                @include transition(.2s);
                float: left;
                width:100%;
                height:100%;
                position: absolute;
                top:0;
            }
            & .ico{
                display: block;
                font-style: initial;
                left:0;
                &.iconfont{
                    font-size:27px;
                }
            }
            & .tips{
                left:100%;
                display: block;
                line-height:45px;
            }
            & .v-a-m{
                line-height: 16px;
                display: inline-block;
                vertical-align: middle;
            }
        }
        & .code-img{
            display: none;
            position: absolute;
            top: -115px;
            left: 50%;
            margin-left: -51px;
        }
        &:hover{
            background-color: #de1e30;
            & .over {
                & .ico {
                    left: -100%;
                }
                & .tips {
                    left: 0;
                }
            }
            & .code-img {
                display: block;
            }
        }
    }
}

// 路径导航
.local-nav-wrap{
    @include clearfix();
    display: block;
    vertical-align: top;
    text-align: left;
    padding: 10px 0;
    & > li{
        display: inline-block;
        color: #777;
        font-size:12px;
        & .icon-next{
            font-size: 13px;
            margin: 0 2px;
            display: inline-block;
        }
        & a{
            @include transition();
            &:hover{
                &.color-red{
                    text-shadow: 0 0 5px #ff8994;
                }
                &.color-black{
                    text-shadow: 1px 0px 2px rgba(0,0,0,0.5);
                }
            }
        }
    }
}
.transition-none{
    @include transition(0s!important);
}
